<template>
  <span class="tools-li-all">
    <transition name="el-zoom-in-center">
      <div v-show="isShow" :key="tooltipId" ref="customAlert" class="custom-demo " transiton="el-zoom-in-center">
        <div style="width: 100%;height: 100%;overflow: hidden">
          <el-scrollbar style="height: 100%;overflow-x: hidden;overflow-y: auto">
            <div class="custom-ul-li">
              <i class="el-icon-menu" />&nbsp;&nbsp;主题切换
            </div>
            <div v-for="(item,index) in dataList " :key="'l-id-'+index" class="custom-ul-li-title">
              <el-radio v-model="checked" :label="item.id" border>{{ item.name }}</el-radio>
            </div>
            <div class="custom-ul-li" style="border-bottom: 0px">
              <el-button type="primary" :loading="loading" @click="checkedSave">切换主题</el-button>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </transition>
    <slot name="reference" />
  </span>
</template>

<script>
import { generateId } from 'element-ui/src/utils/util';
import { queryAllUserLayout, saveUserCheckedLayout } from '@/api/portal/manager/layout/index';
export default {
  name: 'PortalUserLayout',
  props: {
    layout: {
      type: Object,
      default: () => {
        return {};
      }
    },
    trigger: {
      type: String,
      default: 'click',
      validator: value => ['click', 'focus', 'hover', 'manual'].indexOf(value) > -1
    }
  },
  data() {
    return {
      isShow: false,
      dataList: [],
      checked: null,
      loading: false
    };
  },
  computed: {
    tooltipId() {
      return `el-popover-${generateId()}`;
    }
  },
  watch: {
    layout: {
      handler(object) {
        this.checked = object.id;
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  created() {
    this.initLayout();
  },
  mounted() {
    if (this.trigger === 'click' && undefined !== this.$refs.customAlert) { // click 事件
      this.$refs.customAlert.addEventListener('click', this.triggerOnClick);
    }
    if (this.trigger === 'hover' && undefined !== this.$refs.customAlert) {
      this.$refs.customAlert.addEventListener('mouseenter', this.triggerOpen);
      this.$refs.customAlert.addEventListener('mouseleave', this.triggerClose);
    }
  },
  destroyed() {
    if (this.trigger === 'click' && undefined !== this.$refs.customAlert) { // click 事件
      this.$refs.customAlert.removeEventListener('click', this.triggerOnClick);
    }
    if (this.trigger === 'hover' && undefined !== this.$refs.customAlert) {
      this.$refs.customAlert.removeEventListener('mouseenter', this.triggerOpen);
      this.$refs.customAlert.removeEventListener('mouseleave', this.triggerClose);
    }
  },
  methods: {
    initLayout() {
      queryAllUserLayout().then(res => {
        const { data } = res;
        this.dataList = data;
      });
    },
    triggerOnClick() {
      if (this.isShow) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
    triggerOpen() {
      this.isShow = true;
      this.$emit('callBack', this.isShow);
    },
    triggerClose() {
      this.isShow = false;
      this.$emit('callBack', this.isShow);
    },
    checkedSave() {
      if (this.checked !== null) {
        this.loading = true;
        saveUserCheckedLayout({ lid: this.checked }).then(res => {
          location.reload();
          this.loading = false;
        }).catch(() => {
          this.loading = false;
          console.log('切换失败');
        });
      }
    }
  }
};
</script>

<style scoped>
.custom-demo{
  position: absolute;
  width: 180px;
  left: -180px;
  top:68px;
  border-radius: 4px 0px 0px 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  background-color: #ffffff;
  color: #ffffff;
  padding: 10px 10px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  bottom: 0px;
}
.custom-ul-li {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #0a84ff;
  border-bottom: 1px solid #DCDFE6;
}
.custom-ul-li-title {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: left;
  overflow: hidden;
  color: #0a84ff;
}
.el-scrollbar >>> .el-scrollbar__wrap {
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
